<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>智能反馈系统 - 创新JSP页面</title>
	<link rel="stylesheet" href="../css/style.css">
	<div>
		<div class="nav-container">
			<%-- 导航链接部分 有首页，微课程，关于我们，教师或学生登录，教师或学生注册，讯息功能--%>
			<div class="nav-links">
				<a href="student.jsp" class="nav-link">首页</a>
				<%--            <a href="./studenteducation.jsp" class="nav-link">乡村教育平台</a>--%>
				<a href="./studentNews.jsp" class="nav-link">新闻讯息</a>
				<a href="./studentcourses.jsp" class="nav-link">微课程</a> <!-- 修改链接指向微课程页面 -->
				<a href="./studentabout.jsp" class="nav-link">关于我们</a>
				<a href="./studentfeedback.jsp" class="nav-link">用户反馈</a>
				<a href="innovate.jsp" class="nav-link">创新点</a>
				<a href="studentsBackstage.jsp" class="nav-link">我的后台</a>
				<a href="../index.jsp" class="nav-link">退出登录</a>&nbsp;&nbsp;
			</div>
		<style>
            /* 全局设置 */
            :root {
                --primary-color: #3498db;
                --secondary-color: #2ecc71;
                --accent-color: #f39c12;
                --danger-color: #e74c3c;
                --light-bg: #f8f9fa;
                --dark-text: #333;
                --light-text: #fff;
                --border-radius: 8px;
                --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                --transition-time: 0.3s;
            }

            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background-color: var(--light-bg);
                color: var(--dark-text);
                line-height: 1.6;
                padding: 20px;
            }

            a {
                text-decoration: none;
                color: var(--primary-color);
            }

            .container {
                max-width: 900px;
                margin: 0 auto;
                background: var(--light-text);
                padding: 30px;
                border-radius: var(--border-radius);
                box-shadow: var(--box-shadow);
            }

            h1 {
                color: var(--primary-color);
                text-align: center;
                margin-bottom: 30px;
                font-size: 1.8rem;
            }

            .nav-links {
                display: flex;
                justify-content: center;
                gap: 20px;
                margin-bottom: 30px;
            }

            .nav-link {
                display: inline-block;
                padding: 10px 20px;
                background-color: var(--primary-color);
                color: var(--light-text);
                border-radius: var(--border-radius);
                transition: background-color var(--transition-time);
            }

            .nav-link:hover {
                background-color: #258cd1;
            }

            .features {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 20px;
                margin-bottom: 30px;
            }

            .feature-card {
                flex: 1 1 280px;
                min-width: 280px;
                background: #fff;
                padding: 20px;
                border-radius: var(--border-radius);
                box-shadow: var(--box-shadow);
                text-align: center;
                transition: transform var(--transition-time);
            }

            .feature-card:hover {
                transform: translateY(-5px);
            }

            .feature-icon {
                font-size: 28px;
                margin-bottom: 10px;
                color: var(--primary-color);
            }

            .form-group {
                margin-bottom: 20px;
            }

            label {
                display: block;
                margin-bottom: 8px;
                font-weight: bold;
                color: var(--dark-text);
            }

            input[type="text"],
            select,
            textarea {
                width: 100%;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: var(--border-radius);
                font-size: 16px;
                transition: border-color var(--transition-time);
            }

            input[type="text"]:focus,
            textarea:focus {
                outline: none;
                border-color: var(--primary-color);
                box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
            }

            textarea {
                min-height: 120px;
                resize: vertical;
            }

            button {
                background-color: var(--primary-color);
                color: var(--light-text);
                border: none;
                padding: 12px 20px;
                border-radius: var(--border-radius);
                cursor: pointer;
                font-size: 16px;
                transition: background-color var(--transition-time);
            }

            button:hover {
                background-color: #258cd1;
            }

            .voice-btn {
                background-color: var(--secondary-color);
                margin-left: 10px;
                padding: 10px 16px;
            }

            .voice-btn:hover {
                background-color: #219150;
            }

            .ai-suggestions {
                margin-top: 10px;
                padding: 15px;
                background-color: var(--light-bg);
                border-radius: var(--border-radius);
                border-left: 4px solid var(--primary-color);
            }

            .suggestion {
                margin: 5px 0;
                cursor: pointer;
                color: var(--primary-color);
                transition: color var(--transition-time);
            }

            .suggestion:hover {
                color: #1a6eb5;
                text-decoration: underline;
            }

            #feedbackHistory {
                margin-top: 40px;
            }

            #historyContent > div {
                margin-bottom: 15px;
                padding-bottom: 15px;
                border-bottom: 1px solid #eee;
            }

            #historyContent > div:last-child {
                margin-bottom: 0;
                border-bottom: none;
            }
		</style>

		<body>

		<!-- 导航链接 -->


		<div class="container">

			<h1>智能反馈系统</h1>
			<a href="folder.jsp" class="nav-link">文件分类器</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="TaskManager.jsp" class="nav-link">AI任务管理工具</a>
			<!-- 创新功能展示区 -->
			<div class="features">
				<div class="feature-card">
					<div class="feature-icon">🤖</div>
					<h3>AI智能建议</h3>
					<p>实时分析您的输入并提供智能建议</p>
				</div>
				<div class="feature-card">
					<div class="feature-icon">⚡</div>
					<h3>动态加载</h3>
					<p>内容更新无需页面刷新</p>
				</div>
				<div class="feature-card">
					<div class="feature-icon">🎤</div>
					<h3>语音输入</h3>
					<p>支持语音输入内容</p>
				</div>
			</div>

			<form id="feedbackForm" action="ProcessFeedback" method="post">
				<div class="form-group">
					<label for="name">您的姓名</label>
					<input type="text" id="name" name="name" placeholder="请输入您的姓名">
				</div>

				<div class="form-group">
					<label for="email">电子邮箱</label>
					<input type="text" id="email" name="email" placeholder="请输入您的邮箱">
				</div>

				<div class="form-group">
					<label for="feedbackType">反馈类型</label>
					<select id="feedbackType" name="feedbackType">
						<option value="suggestion">建议</option>
						<option value="bug">错误报告</option>
						<option value="compliment">表扬</option>
						<option value="other">其他</option>
					</select>
				</div>

				<div class="form-group">
					<label for="message">反馈内容
						<button type="button" id="voiceInputBtn" class="voice-btn">🎤 语音输入</button>
					</label>
					<textarea id="message" name="message" placeholder="请详细描述您的反馈"></textarea>

					<!-- 创新点1: AI辅助建议区域 -->
					<div id="aiSuggestions" class="ai-suggestions" style="display:none;">
						<h4>AI建议:</h4>
						<div id="suggestionsList"></div>
					</div>
				</div>

				<button type="submit">提交反馈</button>
			</form>

			<!-- 创新点2: 动态加载的反馈历史 -->
			<div id="feedbackHistory">
				<h2>最近的反馈</h2>
				<div id="historyContent">
					<p>正在加载反馈历史...</p>
				</div>
			</div>
		</div>

		<script>
            // 创新点1: 实时AI辅助建议
            document.getElementById('message').addEventListener('input', function() {
                const message = this.value;
                if (message.length > 10) {
                    setTimeout(() => {
                        const suggestions = generateAISuggestions(message);
                        displaySuggestions(suggestions);
                    }, 500);
                } else {
                    document.getElementById('aiSuggestions').style.display = 'none';
                }
            });

            function generateAISuggestions(text) {
                const suggestions = [];

                if (text.includes('问题')) {
                    suggestions.push("您可以更详细描述遇到的问题吗？包括出现的步骤和环境。");
                }

                if (text.includes('建议')) {
                    suggestions.push("感谢您的建议！您能说明这个改进会如何帮助您吗？");
                }

                if (text.length < 50) {
                    suggestions.push("您的描述似乎有点简短，添加更多细节会帮助我们更好地理解。");
                }

                if (suggestions.length === 0) {
                    suggestions.push("您的反馈很清晰！是否需要添加任何截图或示例来进一步说明？");
                }

                return suggestions;
            }

            function displaySuggestions(suggestions) {
                const container = document.getElementById('aiSuggestions');
                const list = document.getElementById('suggestionsList');

                list.innerHTML = '';
                suggestions.forEach(suggestion => {
                    const div = document.createElement('div');
                    div.className = 'suggestion';
                    div.textContent = suggestion;
                    div.onclick = function() {
                        document.getElementById('message').value += ' ' + suggestion;
                    };
                    list.appendChild(div);
                });

                container.style.display = 'block';
            }

            // 创新点2: 动态加载反馈历史
            window.addEventListener('load', function() {
                loadFeedbackHistory();
            });

            function loadFeedbackHistory() {
                setTimeout(() => {
                    const historyContent = document.getElementById('historyContent');
                    historyContent.innerHTML = `
                    <div>
                        <strong>张三</strong> - <em>建议</em> - <small>2023-05-15</small>
                        <p>希望能增加夜间模式功能。</p>
                    </div>
                    <div>
                        <strong>李四</strong> - <em>错误报告</em> - <small>2023-05-14</small>
                        <p>在移动设备上提交表单时按钮显示不正常。</p>
                    </div>
                    <div>
                        <strong>王五</strong> - <em>表扬</em> - <small>2023-05-12</small>
                        <p>非常喜欢这个新设计，使用起来很流畅！</p>
                    </div>
                `;
                }, 1000);
            }

            // 创新点3: 语音输入支持
            document.getElementById('voiceInputBtn').addEventListener('click', function() {
                if (!('webkitSpeechRecognition' in window)) {
                    alert("您的浏览器不支持语音识别功能，请使用Chrome或Edge浏览器。");
                    return;
                }

                const recognition = new webkitSpeechRecognition();
                recognition.lang = 'zh-CN';
                recognition.interimResults = false;

                recognition.onstart = function() {
                    document.getElementById('voiceInputBtn').textContent = '正在聆听...';
                    document.getElementById('voiceInputBtn').style.backgroundColor = '#d94f3f';
                };

                recognition.onresult = function(event) {
                    const transcript = event.results[0][0].transcript;
                    document.getElementById('message').value += ' ' + transcript;
                };

                recognition.onerror = function(event) {
                    console.error('语音识别错误:', event.error);
                };

                recognition.onend = function() {
                    document.getElementById('voiceInputBtn').textContent = '🎤 语音输入';
                    document.getElementById('voiceInputBtn').style.backgroundColor = '#2ecc71';
                };

                recognition.start();
            });
		</script>

		</body>
</html>
